<template>
	<div class="main">
		<el-card class="box-card">
		    <template #header>
		      <div class="card-header">
		        <span>个人信息</span>
		      </div>
		    </template>
			<div class="text item">
				<label>用户名：</label>
				<label>{{userInfo.nickname}}</label>
			</div>
		    <div class="text item">
				<label>登录账号：</label>
				<label>{{account}}</label>
			</div>
			<div class="text item">
				<label>手机号码：</label>
				<label>{{userInfo.phone}}</label>
			</div>
		</el-card>
		<el-card class="box-card">
		    <template #header>
		      <div class="card-header">
		        <span>修改密码</span>
		      </div>
		    </template>
			<div class="text item">
				<label>新密码：</label>
				<el-input type="text" max="18" style="width: 200px" v-model="newpwd"></el-input>
			</div>
		    <el-button type="success" @click="updatePwd()">确认修改</el-button>
		</el-card>
		<el-card class="box-card">
		    <template #header>
		      <div class="card-header">
		        <span>更换头像</span>
		      </div>
		    </template>
			<div class="update-avatar">
				<div style="display: flex;align-items: center;flex-direction: column;">
					<el-avatar :size="100" shape="square" fit="cover"
						:src="userInfo.img?(`${$ServerUrl}/api/public/showImg/${userInfo.img}`):require('@/assets/img/user.png')">
					</el-avatar>
					<el-button size="mini" style="margin-top: 5px;" @click="showUpImg=!showUpImg">更换头像</el-button>
				</div>
				<div v-if="showUpImg" class="upImgs">
					<el-upload action=""
						list-type="picture-card" :auto-upload="false" :limit="1"
						ref="fileFrom"
						:http-request="upload">
						点我选择图片
					</el-upload>
					<el-button @click="uploadImg" style="margin-top: 5px;">上传图片</el-button>
				</div>
			</div>
		</el-card>
		<el-card class="box-card">
		    <template #header>
		      <div class="card-header">
		        <span>昵称与手机号码修改</span>
		      </div>
		    </template>
			<div class="text item">
				<label>新网名：</label>
				<el-input type="text" max="15" style="width: 200px" v-model="userinfo.nickname"></el-input>
			</div>
			<div class="text item">
				<label>新手机号：</label>
				<el-input type="phone" maxlength="11" placeholder="请输入11位数的手机号码" style="width: 200px" v-model="userinfo.phone"></el-input>
			</div>
		    <el-button type="success" @click="updUserInfo()">确认修改</el-button>
		</el-card>
	</div>
</template>

<script>
import qs from 'qs';
import { ElMessage } from 'element-plus';
import {mapState,mapMutations} from 'vuex';
// import {Plus} from '@element-plus/icons-vue';
export default{
	name:'Myset',
	// components:{Plus},
	data(){
		return {
			account:localStorage.account,//登录账号
			showUpImg:false,
			newpwd:'',//新密码
			userinfo:{
				nickname:'',
				phone:''
			}
		}
	},
	computed:{
		...mapState(['userInfo']),
	},
	methods:{
		uploadImg(){
			this.$refs.fileFrom.submit();
		},
		upload(param){
			let file = param.file;
			let isJPG = (file.type.indexOf('image')!=-1);
			let isLt1M = file.size / 1024 / 1024 < 1
			if(!isJPG){
				ElMessage.error({message: '图片格式错误'});
				return false;
			}else if(!isLt1M){
				ElMessage.error({message: '图片大小不能超过1M'});
				return false;
			}
			let fd = new FormData();
			fd.append('img',file,file.name);
			this.axios.post('/api/fore/user/updateImg',fd).then((res)=>{
				if(res.data.code==200){
					this.showUpImg = false;
					ElMessage({type:'success', message: '更换头像成功！'});
					this.$store.commit('setUserImg',res.data.data);
				}else{
					ElMessage.error({message: '图片更换失败！'});
				}
			}).catch((err)=>{
				//console.log(err);
			})
		},
		//修改密码
		updatePwd(){
			if(!this.newpwd)return false;
			this.axios.post('/api/fore/user/updatePwd',`pwd=${this.newpwd}`).then((res)=>{
				 if(res.data.code==200){
					ElMessage({
						type:'success',
						message: res.data.msg
					})
					this.newpwd = '';
				 }
			}).catch((err)=>{
				//console.log(err);
			})
		},
		//修改用户名和手机号
		updUserInfo(){
			if(!this.userinfo.nickname && !this.userinfo.phone)return false;
			this.axios.post('/api/fore/user/updateInfo',qs.stringify(this.userinfo)).then((res)=>{
				 if(res.data.code==200){
					ElMessage({
						type:'success',
						message: res.data.msg
					})
					setTimeout(()=>{
						window.location.reload();
					},300)
				 }
			}).catch((err)=>{
				//console.log(err);
			})
		}
	}
}
</script>

<style scoped>
.main{
	display: flex;
	flex-wrap: wrap;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 45%;
  float: left;
  margin: 10px auto;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader-icon svg {
  margin-top: 74px; /* (178px - 28px) / 2 - 1px */
}
.update-avatar {
  width: 100%;
  display: flex;
}
.upImgs{
	margin-left: 50px;
	display: flex;
	align-items: center;
	flex-direction: column;
}
</style>
